<template>


<div>
     <input class="my-input" v-model="inputContent" placeholder="Take to do"  v-on:keyup.enter="onEnter"/>
     <ul class="todolist">
         <li v-for="list in listContents">
               {{list.content}}
          </li>
      </ul>
</div>


</template>

<script>
    import vPageTitle from '../common/pageTitle.vue';




    export default {
        components:{
            vPageTitle
        },
        data(){
            return{
                inputContent:'',
                listContents:[
                    {content:'李主任的文档还需整理',isDone:false},
                    {content:'王大美的医疗档案需要重新誊写',isDone:false},
                    {content:'去拿快递',isDone:false},
                    {content:'给广西卡莱科技有限公司汇款！',isDone:false},
                    {content:'整理衣服，该扔的就扔了',isDone:false},
                    {content:'准备面试（安卓）',isDone:false},
                    {content:'将笔记从为知笔记迁移到印象笔记当中来',isDone:false}

                ]
            }
        },

        methods: {
            onEnter:function(){

                if(this.inputContent!=''){

                    var listContent={content:this.inputContent,isDone:true};
                    this.listContents.splice(0,0,listContent);
                    this.inputContent='';
                }
            }
        }
    }
</script>

<style>
    .el-col{
        margin-bottom:16px;
    }
    .todolist{
        margin-top:5px;
        list-style:none;
        border:1px solid #ccc;
        border-radius:6px;
    }
    .todolist li{
        transition:all 0.5s;
        -moz-transition:all 0.5s;
        -o-transition:all 0.5s;
        -webkit-transition:all 0.5s;
        line-height:20px;
        padding:10px;
        border-bottom:1px solid #ccc;
        cursor:pointer;
        border-left:5px solid #209e91;
        text-align:left;
        font-size: 12px;
    }
    .todolist li:nth-child(2n){
          border-left:5px solid #0e8174;
    }

    .todolist li:hover{
        border-left:30px solid #209e91;
        background-color:#eee;
    }
    .my-input{
        line-height:28px;
        border:1px solid #ccc;
        border-radius:6px;
        width:98%;
        padding:5px;
    }



</style>
